<template>
  <div class="page_box">
    <el-collapse v-model="activeNames" @change="handleChange">
      <el-collapse-item title="标签页 tab" name="10">
        <div class="content bg">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
            <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
            <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth"
              >定时任务补偿</el-tab-pane
            >
          </el-tabs>
        </div>
      </el-collapse-item>
      <el-collapse-item title="表格" name="9">
        <div class="content bg table_box">
          <div class="table">
            <el-table :data="tableData" style="width: 100%">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column prop="date" sortable label="日期" width="180">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="address" label="地址"> </el-table-column>
            </el-table>
          </div>
          <div class="table">
            <el-table :data="tableData" style="width: 100%" stripe>
              <el-table-column prop="date" label="日期" width="180">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="address" label="地址"> </el-table-column>
            </el-table>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="正在加载动画样式" name="8">
        <div class="content bg">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>正在加载动画样式</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >···</el-button
              >
            </div>
            <div class="card_box" v-loading="true"></div>
          </el-card>
        </div>
      </el-collapse-item>
      <el-collapse-item title="弹出框 dialog (头部icon 未改)" name="7">
        <div class="content bg">
          <el-button type="text" @click="dialogVisible = true"
            >点击打开 Dialog</el-button
          >

          <el-dialog
            title="弹窗标题"
            :visible.sync="dialogVisible"
            width="40%"
            :before-close="handleClose"
          >
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dialogVisible = false"
                >确 定</el-button
              >
              <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
          </el-dialog>
        </div>
      </el-collapse-item>
      <el-collapse-item title="卡片 card(头部样式书写方式 待考虑)" name="6">
        <div class="content bg">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>卡片名称</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >···</el-button
              >
            </div>
            <div v-for="o in 4" :key="o" class="text item">
              {{ "列表内容 " + o }}
            </div>
          </el-card>
        </div>
      </el-collapse-item>
      <el-collapse-item title="分页(未处理)" name="5">
        <div class="content bg">
          <el-pagination
            @size-change="handleSizeChange"
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </el-collapse-item>
      <el-collapse-item title="表单及其表单内控件" name="4">
        <div class="content bg">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="输入框">
              <el-input class="new_1" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="下拉框">
              <el-select
                class="new_1"
                v-model="form.region"
                placeholder="请选择活动区域"
              >
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
                <el-option label="区域二" value="beij2ing"></el-option>
                <el-option label="区域二" value="b1eiji2ng"></el-option>
                <el-option label="区域二" value="be1iji2ng"></el-option>
                <el-option label="区域二" value="bei1ji2ng"></el-option>
                <el-option label="区域二" value="beij1i2ng"></el-option>
                <el-option label="区域二" value="beiji12ng"></el-option>
                <el-option label="区域二" value="beiji21ng"></el-option>
                <el-option label="区域二" value="beiji2n1g"></el-option>
                <el-option label="区域二" value="beiji2ng1"></el-option>
                <el-option label="区域二" value="b2eiji2ng"></el-option>
                <el-option label="区域二" value="be2iji2ng"></el-option>
                <el-option label="区域二" value="bei2jin2g"></el-option>
                <el-option label="区域二" value="beij2ing2"></el-option>
                <el-option label="区域二" value="beiji2n3g"></el-option>
              </el-select>
              <el-select
                v-model="form.region"
                class="new_1"
                placeholder="请选择活动区域"
                disabled
              >
                <el-option label="区域一" value="shanghai"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期范围">
              <el-col :span="11">
                <el-date-picker
                  v-model="value1"
                  type="datetimerange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['12:00:00']"
                  class="new_1"
                >
                </el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="日期选择">
              <el-col :span="11">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="form.date1"
                  class="new_1"
                ></el-date-picker>
              </el-col>

              <el-col :span="11">
                <el-time-picker
                  placeholder="选择时间"
                  v-model="form.date2"
                  class="new_1"
                ></el-time-picker>
              </el-col>
              <el-col :span="11">
                <el-date-picker
                  v-model="form.date4"
                  type="month"
                  placeholder="选择月"
                  class="new_1"
                >
                </el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="开关">
              <el-switch v-model="form.delivery" active-text="关闭"></el-switch>
              <el-switch
                v-model="form.delivery1"
                class="new_1"
                active-text="打开"
              ></el-switch>
              <el-switch
                disabled
                v-model="form.delivery2"
                class="new_1"
                active-text="禁用"
              ></el-switch>
            </el-form-item>
            <el-form-item label="多选框">
              <el-checkbox-group v-model="form.type" class="new_1">
                <el-checkbox
                  class="new_1"
                  label="选中"
                  name="type"
                ></el-checkbox>
                <el-checkbox
                  class="new_1"
                  label="未选中"
                  name="type"
                ></el-checkbox>
                <el-checkbox
                  class="new_1"
                  label="禁用"
                  disabled
                  name="type"
                ></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="单选框">
              <el-radio-group v-model="form.resource" class="new_1">
                <el-radio label="选中"></el-radio>
                <el-radio label="未选中"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="活动形式" class="new_1">
              <el-input
                type="textarea"
                class="new_1"
                v-model="form.desc"
              ></el-input>
            </el-form-item>
            <el-form-item
              :style="{ display: 'flex', 'justify-content': 'center' }"
            >
              <el-button class="new_1" type="primary" @click="onSubmit"
                >立即创建</el-button
              >
              <el-button class="new_1">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
      <el-collapse-item title="消息提示框" name="3">
        <div class="content bg">
          <div class="btn_box">
            <el-button
              :plain="true"
              class="new_1"
              @click="openMessage('success')"
              >成功</el-button
            >
            <el-button
              class="new_1"
              :plain="true"
              @click="openMessage('warning')"
              >警告</el-button
            >
            <el-button class="new_1" :plain="true" @click="openMessage('info')"
              >消息</el-button
            >
            <el-button class="new_1" :plain="true" @click="openMessage('error')"
              >错误</el-button
            >
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="按钮" name="2">
        <div class="content bg">
          <div class="btn_box">
            <el-button class="new_1">默认按钮 32</el-button>
            <el-button class="new_1" size="mini" icon="el-icon-setting"
              >超小按钮 32</el-button
            >
            <el-button class="new_1" size="small" icon="el-icon-setting"
              >小型按钮 38</el-button
            >
            <el-button class="new_1" size="medium" icon="el-icon-setting"
              >中等按钮 46</el-button
            >
          </div>
          <div class="btn_box">
            <el-button class="new_1" icon="el-icon-setting"
              >默认按钮 18x18</el-button
            >
            <el-button class="new_1" type="primary" icon="el-icon-setting"
              >主要按钮
            </el-button>
            <el-button class="new_1" icon="el-icon-setting" disabled
              >禁用按钮
            </el-button>
            <el-button class="new_1" type="text">文字按钮 </el-button>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="文字样式" name="1">
        <div class="content bg">
          <p class="fs30">特大号</p>
          <p class="fs24">主标题</p>
          <p class="fs20">常规文本-标题</p>
          <p class="fs18">常规文本-正文</p>
          <p class="fs16">辅助文本</p>
          <p class="fs14">次要文本</p>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
export default {
  name: "pageStyle",
  data() {
    return {
      activeNames: ["10"], // 默认打开
      activeName: "first",
      value1: "",
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        date3: "",
        date4: "",
        delivery: false,
        delivery1: true,
        delivery2: false,
        type: ["选中"],
        resource: "选中",
        desc: "",
      },
      currentPage4: 1,
      dialogVisible: false,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },

  methods: {
    handleChange(val) {
      console.log(val);
    },
    openMessage(type) {
      this.$message({
        message: "恭喜你，这是一条成功消息",
        type: type,
        duration: 300000,
      });
    },
    onSubmit() {},
    handleSizeChange() {},
    handleCurrentChange() {},
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    handleClick() {},
  },
};
</script>

<style lang="scss" scoped>
.page_box{
  width: 100%;
  height: 100%;
}
::v-deep .el-collapse-item__header {
  background-color: #f5f3ef;
  font-size: 20px;
  padding-left: 40px;
}
::v-deep .el-collapse-item__content {
  padding: 0;
}
.content {
  padding: 5px 40px;
  border: 1px solid #ededed;
}
.btn_box {
  display: flex;
  margin-bottom: 10px;
}
.card_box {
  width: 100%;
  height: 300px;
}

.table_box {
  display: flex;

  .table {
    flex: 1;
    height: 300px;
  }
}
</style>
